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Overview 

•Animation Principles 
•How it relates to gameplay 
•Putting it together 
•Reviewing Skullgirls 
•Takeaways 
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Who am I? 
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Skullgirls? 



2D animated 
fighting game 
for PSN/XBLA/ 
Steam 

All hand drawn 
by a team of 
traditional 
animators 
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Animation Principles 
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Silhouette 
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Clear silhouette 
in your keys is 
the basis of 
making strong 
animation 
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Anticipation 
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• Even one frame 
of anticipation 
is enough 

• Gives the move 
contrast to 
make it look 
more powerful 
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A note about anticipation 

•Player characters generally need to move quicker than 
enemies to be responsive, so you might not have time for 
much anticipation 

(That being said, you should always have time for some) 

•Enemy characters generally need to give the player time to 
react, so they need more anticipation 
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Favoring your Keys 
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• In situations 
where you have 
limited frames, 
having 

inbetweens that 
emphasize your 
keys is 
important 
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Followthrough 
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• Use 

followthrough 
effectively to 
help fill in the 
gaps where you 
may not have 
time for 
inbetweens 
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Smears 
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Smears also help fill in the 
gaps when you need to 
have a huge motion 
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Smears 



Chun-Li from Street Fighter 
III: Third Strike 


Ibuki from Street 
Fighter III: Third Strike 
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Captain America from 
Marvel vs. Capcom 
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Overshoot 




• One frame of an 
attack 

'overshooting' 
its final key 
frame helps 
give it impact 
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Overshoot 


Street Fighter 
III: Third Strike 
has a lot of 
great examples 
of overshoot, 
including this 
example with 
M a koto 
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Breaking the body 



Don't be afraid 
to break limbs 
to push your 
animation 

A frame of 
delay helps give 
your animation 
strength 
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Breaking the body 


Felicia from Darkstalkers 


Sol Badguy from 
Guilty Gear 


Necro from Street Fighter 
III: Third Strike 
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Remember, you're animating! 

• Animation is the impression of creating a motion 

• Remember your foundations, but push, exaggerate, and 
break a few bones to make your animation look awesome 


You're creating movement, not individual pieces of art 
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Timing and Gameplay 
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The Skullgirls Process 



Rough > Implement > Finish > Implement 
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Know what you're making 

• In Skullgirls, we have general framecount guidelines for 
weak, medium and hard moves when doing roughs, so 
we have a starting point 

• Work with your designer to get an idea of what she 
needs, and start animating from there 
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Use holds effectively 

• If your game allows it, don't feel beholden to animating 
with each frame held the same amount of time, e.g. 
holding every frame for 4 frames at 60fps (approximately 
animating on twos) 

• Sometimes mixing up the timing to hold your keys and its 
surrounding frames longer can save you frames 
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Use holds effectively, example 
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Old timing at even intervals 


New timing with holds emphasized 
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Hitstop 

• Hitstop is the period on an impact where both characters 
freeze before playing the rest of the animations 

• This is more programmatic and less an animation thing, 
but important nonetheless 

• "You damn well don't make a game without hitstop." 

- Mike Z, designer of Skullgirls 
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Transitioning to and from idle 

• Don't forget that your idle animation is a motion in itself, 
so don't ease in and out of your idle animation 
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Gameplay is king! 

• Find ways to work with your designers, not against them 

• Ask your designer questions! 

• You may be able to animate the most fluid jump with a 
ton of anticipation and a beautiful landing, but it won't do 
your game any good if it doesn't work with the game 
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Putting it Together 
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Anticipation, smear. 
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main key, return 

• If you think of 
an attack in 
these parts, it 
doesn't actually 
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Lessons from 
Skullgirls 
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Fluid vs Overanimated 

•The animation in Skullgirls was always smooth, but I didn't 
know how to effectively apply the previous principles, 
resulting in animation with unnecessary frames in the 
beginning 
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Filia's 21 frame kneefall 



• 21 frames- too 
many! Lots of 
unnecessary 
and redundant 
detail 

• Animation is too 
even, lacks 
impact 
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Filia's 21 frame kneefall, fixed 



• More focus on 
keys, less 
inbetweens 

• Six frames less 
than old 
version, but still 
as effective and 
has more punch 
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Cerebella Diamond 
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Punch 

• I don't know 
why this is 45 
frames 

• Overanimated, 
tons of 
unnecessary 
inbetweens 
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Cerebella Diamond 
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Punch, fixed 

• 29 frames- 
could maybe be 
even less 

• Needs 
readjusting, but 
the poses are 
much clearer 
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One more note about Filia 




Original version 


One frame removed 
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Review 

• Focus on your keys and use followthrough to 
fill in the gaps 

•The core parts of a move: anticipation, smear, 
attack, return to idle 

•Animation can and should work with game 
design 
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Resources 

•Zweifuss (zweifuss.ca) 

Street Fighter III: Third Strike sprites 


• Fighters Generation (fightersgeneration.com) 

Thousands of sprites from all kinds of fighting games 
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Thank you! 

@kinucakes 


Games referenced: 

Skullgirls, Autumn Games 
Darkstalkers, Capcom 
Street Fighter III: Third Strike, Capcom 
Marvel vs Capcom , Capcom 
Guilty Gear > Arc System Works 



